<script setup lang='ts'>
const svg = ref('d')
</script>

<template>
  <div>
    <h1>Vue3如何写css</h1>
    <div color="white" my10 h100 w100 bg-red px10 text-20 font600>小橘猫</div>
    <div mt10 h100 w100 border="10 solid blue" />
    <div mt10 h100 w100 border="10 r-solid blue" />
    <div mt10 h100 w100 border="10 solid #f00" />
    <div mt10 h100 w100 border="10 solid [rgba(0,0,0,.5)]" />
    <hr>
    <h3>flex布局</h3>
    <div h100 w300 flex items-center b-rd-10 px10 border="10 solid blue">
      <div h50 w50 bg-red />
      <div ml20 h50 w50 bg-yellow />
      <div ml-auto h50 w50 bg-green />
    </div>
    <div mt20 h100 w300 flex="~ items-center" px10 border="10 solid blue">
      <div h50 w50 bg-red />
      <div ml20 h50 w50 bg-yellow />
      <div ml-auto h50 w50 bg-green />
    </div>
    <div mt20 h300 w100 flex flex-col items-center py10 border="10 solid blue">
      <div h50 w50 bg-red />
      <div mt20 h50 w50 bg-yellow />
      <div mt-a h50 w50 bg-green />
    </div>
    <div mt20 h100 w300 flex-middle px10 border="10 solid blue">
      <div h50 w50 bg-red />
      <div ml20 h50 w50 bg-yellow />
      <div ml-auto h50 w50 bg-green />
    </div>
    <div h200 w200 flex-center border="10 solid blue">
      <div h50 w50 bg-red />
    </div>
    <hr>
    <h3>grid</h3>
    <div grid grid-cols-2 h200 w200 border="10 solid blue">
      <div bg-red />
      <div bg-green />
      <div bg-pink />
      <div bg-yellow />
    </div>
    <div grid="~ cols-[100px_1fr_2fr]" mt30 h200 w-full gap10 border="10 solid #ddd">
      <div bg-red />
      <div bg-green />
      <div bg-blue />
      <div bg-red />
      <div bg-green />
      <div bg-blue />
    </div>

    <div grid="~ cols-[100px_1fr_1fr] md:cols-[100px_1fr_2fr]" mt30 h200 w-full gap10 border="10 solid #ddd">
      <div bg-red />
      <div bg-green />
      <div bg-blue />
      <div bg-red />
      <div bg-green />
      <div bg-blue />
    </div>
    <hr>
    <h3>字体</h3>
    <div text-20 text-op-55 font600 color="[rgba(37,51,71,1)]">小橘猫1 </div>
    <div t205b6>小橘猫2</div>
    <h3>图片背景</h3>
    <div h100 w100 bg="img-[@/assets/png/cat.png]" />
    <h3>网络图标</h3>
    <div class="i-ep:cherry" color="red" h50 w50 />
    <div color="blue" class="i-ant-design:code-sandbox-circle-filled" h50 w50 />
    <hr>
    <h3>本地图标</h3>
    <div color="red" i-momo-a h50 w50 />
    <div color="red" :class="`i-menu-${svg}`" h50 w50 @click="svg === 'd' ? svg = 'e' : svg = 'd'" />
  </div>
</template>

<style lang='less' scoped>

</style>
